<!doctype html>
<html lang="en" data-framework="thorax">
	<head>
		<meta charset="utf-8">
		<title>Thorax • TodoMVC</title>
		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
	</head>
	<body>
		<script type="text/template" data-template-name="app">
			<section id="todoapp">
				<header id="header">
					<h1>todos</h1>
					<input id="new-todo" placeholder="What needs to be done?" autofocus>
				</header>
			{{^empty collection}}
			<section id="main">
				<input id="toggle-all" type="checkbox">
				<label for="toggle-all">Mark all as complete</label>
				{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
					<div class="view">
						<input class="toggle" type="checkbox" {{#if completed}}checked="checked"{{/if}}>
						<label>{{title}}</label>
						<button class="destroy"></button>
					</div>
					<input class="edit" value="{{title}}">
				{{/collection}}
			</section>
			{{view "stats" tag="footer" id="footer"}}
			{{/empty}}
			</section>
			<div id="info">
				<p>Double-click to edit a todo</p>
				<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/eastridge">Ryan Eastridge</a></p>
				<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
			</div>
		</script>
		<script type="text/template" data-template-name="stats">
			<span id="todo-count"><strong>{{remaining}}</strong> {{itemText}} left</span>
			<ul id="filters">
				<li>
					{{#link "/" class="selected"}}All{{/link}}
				</li>
				<li>
					{{#link "/active"}}Active{{/link}}
				</li>
				<li>
					{{#link "/completed"}}Completed{{/link}}
				</li>
			</ul>
			{{#if completed}}
				<button id="clear-completed">Clear completed</button>
			{{/if}}
		</script>
		<script src="bower_components/todomvc-common/base.js"></script>
		<script src="bower_components/jquery/jquery.js"></script>
		<script src="bower_components/handlebars.js/handlebars.js"></script>
		<script src="bower_components/underscore/underscore.js"></script>
		<script src="bower_components/backbone/backbone.js"></script>
		<script src="bower_components/thorax/thorax.js"></script>
		<script src="js/lib/backbone-localstorage.js"></script>
		<script>
			// Grab the text from the templates we created above
			Thorax.templates = {
				app: Handlebars.compile($('script[data-template-name="app"]').html()),
				stats: Handlebars.compile($('script[data-template-name="stats"]').html())
			};

			// Initialize the app object
			window.app = {};
		</script>
		<script src="js/models/todo.js"></script>
		<script src="js/collections/todos.js"></script>
		<script src="js/views/todo-item.js"></script>
		<script src="js/views/stats.js"></script>
		<script src="js/views/app.js"></script>
		<script src="js/routers/router.js"></script>
		<script src="js/app.js"></script>
	</body>
</html>
